<template>
	<div id="pcProfessional">
		<!--专业大全-->
		<!--导航栏-->
		<div class="t_banner">
			<img src="../assets/index/index_10.jpg" alt="" class="ban_fix_all" />
			<div class="t_banner_back_all"> 
				
			</div>
		<div class="dh_pc">
			<div class="dh_posi_pc">
			<div class="logo">
				<img src="../assets/logo.png"/>
			</div>
			<div style="width:30%;"></div>
			<div class="dh_list">
				<ul class="dh_ul">
					 <!--v-for="site in lilist"-->
					 <!-- :class="{dh_ul_li:site.index != dhindex,'dhli':site.index == dhindex}"-->
					<li><router-link :to="{name: 'pcindex'}">首页</router-link></li>
					<li  v-on:click="mouseenover()" >
						<div class="bigData"><span>大数据</span><span  :class="{ down: down, 'top': top}"></span>	
						<div class="bigPanel" v-show="bigDataPanel">		
								<p v-for="data in bigDataList" v-on:click="choseData(data.name,data.index)">{{data.name}}</p>
						</div>
					 </div>	
					</li>
					<li v-on:mouseover="mouseenoverone()"><span>测试测评</span><span  :class="{ down: onedown, 'top': onetop}"></span></li>
					<li v-on:mouseover="mouseenovertwo()"><span>志愿填报</span><span  :class="{ down: towdown, 'top': towtop}"></span></li>
					<li>有问必答</li>
					<li>新闻资讯</li>
				</ul>
			</div>
			</div>
		</div>
		<!---->
		<div class="dh_pc_title">
			<div class="dh_pc_title_b">专业大全</div>
		</div>	
	</div>
	
	<!--内容-->
	<div class="fiexd">
		<!--导航-->
     <div class="search_dh">
        <ul>
        	<li><span><router-link :to="{name: 'pcindex'}"> 首页</router-link></span></li>
        	<li><span class="dh_j">></span></li>
        	<li><span>大数据</span></li>
        	<li><span class="dh_j">></span></li>
        	<li><span><router-link :to="{name: 'pcprofes'}">专业大全</router-link></span></li>
        </ul>
     </div>
     <!--专业大全-->
     <div class="profess">
     	<!--搜索框-->
     	<div class="pro_sk"> 	
     	<div class="search_k">
     		<input type="text" name="search" placeholder="请输入专业名称进行查询" />
     		<div class="search_k_bt"><img src="../assets/professional/pro_03.jpg" alt="" /> </div>
     	</div> 
     	<!--专业-->
     	<div class="pro_name">
     		<div class="pro_name_title">
     			<ul>
     				<li v-for="site in proList" v-on:click="chosePro(site.index)" :class="{pro:site.indx!=proindex,'proActive':site.index==proindex}"><span>{{site.name}}</span></li>
     			</ul>
     		</div>
     		<div class="pro_name_list">
     			<div class="pro_name_list_s">
     				<ul>
     					<li v-for="site in peodataList" v-on:click="choseProdata(site.index)" :class="{prodataActive:site.index==prodataindex,'prodata':site.index != prodataindex}">
     						<span >{{site.name}}</span>
     					</li>
     				</ul>
     			</div>
     		</div>
     		<!--所有学科选择-->
     		<div class="pro_diso">
     			<div class="pro_diso_title">
     				<div class="pro_diso_name"><i></i><span>哲学</span></div>
     				<div class="pro_diso_content">
     					<!--哲学-->
     					<div class="pro_diso_center">
     						<div class="pro_cat_title">
     							<div class="pro_cat_fast_title">哲学类</div>
     							
     							<div class="pro_cat_title_list">
     								<ul>
     									<li>逻辑学<span>|</span></li>
     									<li>哲学<span>|</span></li>
     									<li>伦理学<span>|</span></li>
     								</ul>
     							</div>
     						</div>
     						<div class="pro_cat_base">
     							<ul>
     								<li><span class="base_title">哲学实验班</span></li>
     								<li><span  class="base_name">哲学基地</span></li>
     							</ul>
     						</div>
     					</div>
     				</div>
     			</div>
     			<!--经济学-->
     				<div class="pro_diso_title">
     				<div class="pro_diso_name"><i></i><span>经济学</span></div>
     				<div class="pro_diso_content">
     					<!--哲学-->
     					<div class="pro_diso_center">
     						<div class="pro_cat_title">
     							<div class="pro_cat_fast_title">经济学类</div>
     							
     							<div class="pro_cat_title_list">
     								<ul>
     									<li>逻辑学<span>|</span></li>
     									<li>哲学<span>|</span></li>
     									<li>伦理学<span>|</span></li>
     								</ul>
     							</div>
     						</div>
     						<div class="pro_cat_base">
     							<ul>
     								<li><span class="base_title">哲学实验班</span></li>
     								<li><span  class="base_name">哲学基地</span></li>
     							</ul>
     						</div>
     					</div>
     				</div>
     			</div>
     			<!--经济学-->
     				<div class="pro_diso_title">
     				<div class="pro_diso_name"><i></i><span>经济学</span></div>
     				<div class="pro_diso_content">
     					<!--哲学-->
     					<div class="pro_diso_center">
     						<div class="pro_cat_title">
     							<div class="pro_cat_fast_title">经济学类</div>
     							
     							<div class="pro_cat_title_list">
     								<ul>
     									<li>逻辑学<span>|</span></li>
     									<li>哲学<span>|</span></li>
     									<li>伦理学<span>|</span></li>
     								</ul>
     							</div>
     						</div>
     						<div class="pro_cat_base">
     							<ul>
     								<li><span class="base_title">哲学实验班</span></li>
     								<li><span  class="base_name">哲学基地</span></li>
     							</ul>
     						</div>
     					</div>
     				</div>
     			</div>
     			<div class="pro_diso_title">
     				<div class="pro_diso_name"><i></i><span>哲学</span></div>
     				<div class="pro_diso_content">
     					<!--哲学-->
     					<div class="pro_diso_center">
     						<div class="pro_cat_title">
     							<div class="pro_cat_fast_title">哲学类</div>
     							
     							<div class="pro_cat_title_list">
     								<ul>
     									<li>逻辑学<span>|</span></li>
     									<li>哲学<span>|</span></li>
     									<li>伦理学<span>|</span></li>
     								</ul>
     							</div>
     						</div>
     						<div class="pro_cat_base">
     							<ul>
     								<li><span class="base_title">哲学实验班</span></li>
     								<li><span  class="base_name">哲学基地</span></li>
     							</ul>
     						</div>
     					</div>
     				</div>
     			</div>
     			<div class="pro_diso_title">
     				<div class="pro_diso_name"><i></i><span>哲学</span></div>
     				<div class="pro_diso_content">
     					<!--哲学-->
     					<div class="pro_diso_center">
     						<div class="pro_cat_title">
     							<div class="pro_cat_fast_title">哲学类</div>
     							
     							<div class="pro_cat_title_list">
     								<ul>
     									<li>逻辑学<span>|</span></li>
     									<li>哲学<span>|</span></li>
     									<li>伦理学<span>|</span></li>
     								</ul>
     							</div>
     						</div>
     						<div class="pro_cat_base">
     							<ul>
     								<li><span class="base_title">哲学实验班</span></li>
     								<li><span  class="base_name">哲学基地</span></li>
     							</ul>
     						</div>
     					</div>
     				</div>
     			</div>
     			
     		</div>
     	</div>
     </div>
     	
     	<!--左边部分-->
     	<div class="pro_right">
     		<div class="pro_right_k">
     			<!--标题-->
     		  <div class="pro_right_top">
     			<span>高薪专业排行榜</span><i></i>
     			</div>
     			<!--专业标题选择-->
     			<div class="ex_exam">
     				<ul>
     					<li v-for="site in exexamList" v-on:click="choseExam(site.index)" :class="{examfast:site.index == sitesindex,'examActive':site.index != sitesindex}">
     						<span>{{site.name}}</span>
     					</li>
     				</ul>
     				<!--专科专业-->
     			</div>
     			<!--本科专业-->
     				<div class="examList" v-show="bkDataList">
     					<ul>
     						<li>
     							<div class="examData">
     								<b>1</b><span class="exam_ex_name">软件工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>2</b><span class="exam_ex_name">软件工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>3</b><span class="exam_ex_name">软件工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>4</b><span class="exam_ex_name">软件工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>5</b><span class="exam_ex_name">软件工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>6</b><span class="exam_ex_name">软件工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>7</b><span class="exam_ex_name">软件工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>8</b><span class="exam_ex_name">软件工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     					</ul>
     				</div>
     				<!--专科专业-->
     				<div class="prefessList" v-show="preData">
     					<ul>
     						<li>
     							<div class="examData">
     								<b>1</b><span class="exam_ex_name">专科工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>2</b><span class="exam_ex_name">专科工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>3</b><span class="exam_ex_name">专科工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>4</b><span class="exam_ex_name">专科工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>5</b><span class="exam_ex_name">专科工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>6</b><span class="exam_ex_name">专科工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>7</b><span class="exam_ex_name">专科工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     						<li>
     							<div class="examData">
     								<b>8</b><span class="exam_ex_name">专科工程</span><span class="exam_money">￥12000</span>
     							</div>
     						</li>
     					</ul>
     				</div>
     		</div>
     		
     		<!--热门专业排行榜-->
     		<div class="pro_right_ks">
     			<!--标题-->
     		  <div class="pro_right_top">
     			<span>热门专业排行榜</span><i></i>
     			</div>
     			<!--专业标题选择-->
     			<div class="ex_exam">
     				<ul>
     					<li v-for="site in hostList" v-on:click="chosehost(site.index)" :class="{hostfast:site.index == hostindex,'hostActive':site.index != hostindex}">
     						<span>{{site.name}}</span>
     					</li>
     				</ul>
     			</div>
     			<!--本科专业比例-->
     			<div class="hostPre" v-show="hostk">
     				<ul>
     					<li>
     						<div class="examData">
     								<b>1</b><span class="exam_ex_name">本科工程</span><span class="exam_money_b"><span>报考比例：</span>80%</span>
     							</div>
     							<div class="progress">
     								<div class="progress-bar" :style="{width:a,background:c}"></div>
     						</div>
     					</li>
     					<li>
     						<div class="examData">
     								<b>2</b><span class="exam_ex_name">本科工程</span><span class="exam_money_b"><span>报考比例：</span>80%</span>
     							</div>
     							<div class="progress">
     								<div class="progress-bar"></div>
     						</div>
     					</li>
     					<li>
     						<div class="examData">
     								<b>3</b><span class="exam_ex_name">本科工程</span><span class="exam_money_b"><span>报考比例：</span>80%</span>
     							</div>
     							<div class="progress">
     								<div class="progress-bar"></div>
     						</div>
     					</li>
     					<li>
     						<div class="examData">
     								<b>4</b><span class="exam_ex_name">本科工程</span><span class="exam_money_b"><span>报考比例：</span>80%</span>
     							</div>
     							<div class="progress">
     								<div class="progress-bar"></div>
     						</div>
     					</li>
     					<li>
     						<div class="examData">
     								<b>5</b><span class="exam_ex_name">本科工程</span><span class="exam_money_b"><span>报考比例：</span>80%</span>
     							</div>
     							<div class="progress">
     								<div class="progress-bar"></div>
     						</div>
     					</li>
     				</ul>
     			</div>
     			<!--专科专业比例-->
     			<div class="hostPre" v-show="hostzk">
     				<ul>
     					<li>
     						<div class="examData">
     								<b>1</b><span class="exam_ex_name">专科工程</span><span class="exam_money_b"><span>报考比例：</span>80%</span>
     							</div>
     							<div class="progress">
     								<div class="progress-bar" :style="{width:a,background:c}"></div>
     						</div>
     					</li>
     					<li>
     						<div class="examData">
     								<b>2</b><span class="exam_ex_name">专科工程</span><span class="exam_money_b"><span>报考比例：</span>80%</span>
     							</div>
     							<div class="progress">
     								<div class="progress-bar"></div>
     						</div>
     					</li>
     					<li>
     						<div class="examData">
     								<b>3</b><span class="exam_ex_name">专科工程</span><span class="exam_money_b"><span>报考比例：</span>80%</span>
     							</div>
     							<div class="progress">
     								<div class="progress-bar"></div>
     						</div>
     					</li>
     					<li>
     						<div class="examData">
     								<b>4</b><span class="exam_ex_name">专科工程</span><span class="exam_money_b"><span>报考比例：</span>80%</span>
     							</div>
     							<div class="progress">
     								<div class="progress-bar"></div>
     						</div>
     					</li>
     					<li>
     						<div class="examData">
     								<b>5</b><span class="exam_ex_name">专科工程</span><span class="exam_money_b"><span>报考比例：</span>80%</span>
     							</div>
     							<div class="progress">
     								<div class="progress-bar"></div>
     						</div>
     					</li>
     				</ul>
     			</div>
     		</div>
     		<!--平台广告位-->
     		<div class="adver">
     			<div class="ad_right_top"><span>平台广告位</span><i></i></div>
     			<div class="ad_adver">
     			<img src="../assets/professional/ad_03.jpg" alt="" />
     			<div class="ad_content" style="text-indent: 2em;">
     				 仅仅一周时间，20000名考生在“i思志
愿”找得到了适合自己的专业我们将做得更
好，更好的为全国高考学生服务，帮助高考
的学生们找到合适自己的专业，走上人生
正确的道路...
     			  </div>
     			</div>
     		</div>
     	</div>
     </div>
	</div>
	</div>
</template>

<script>
	export default{
		name:'pcprofes',
		data(){
			return{
				down:true,  //大数据
				a:'75%',
				c:'#ffb606',
			  top:false,   //大数据
			  onedown:true,  //测试测评
			  onetop:false,   //测试测评
			  towdown:true,  //智能志愿
			  towtop:false,  //智能志愿
			  bigDataPanel:false,  //大数据面板
			  proindex:1,
			  prodataindex:1,
			  sitesindex:1,    //本科专科选择
			  hostindex:1,      //热门专业选择
			  preData:false,     //专科专业选择
			  hostk:true,     //热门专业比例
			  hostzk:false,   //热门专科专业比例
			  bkDataList:true,//本科专业
			  
			   bigDataList:[   //大数据内容
			   {name:'院校大全',index:1},
			   {name:'专业大全',index:2},
			 ],
			 //选择专业内容标题
			 proList:[
			   {name:'全部专业',index:1,src:''},
			   {name:'本科专业',index:2,src:''},
			   {name:'专科专业',index:3,src:''},
			 ],
			 //专业课
			 peodataList:[
			  {name:'工学',index:1,src:''},
			  {name:'工学',index:2,src:''},
			  {name:'发学',index:3,src:''},
			  {name:'文学',index:4,src:''},
			  {name:'美学',index:5,src:''},
			  {name:'理工学',index:6,src:''},
			  {name:'历史学',index:7,src:''},
			  {name:'艺术学',index:8,src:''},
			  {name:'美学',index:9,src:''},
			  {name:'理工学',index:10,src:''},
			  {name:'历史学',index:11,src:''},
			  {name:'交通运输学',index:12,src:''},
			  {name:'电子信息学',index:13,src:''},
			  {name:'水利大学',index:14,src:''},
			  {name:'艺术学',index:15,src:''},
			 ],
			 //本科专科
			 exexamList:[
			   {name:'本科专业',index:1},
			   {name:'专科专业',index:2},
			 ],
			 hostList:[
			   {name:'本科专业',index:1},
			   {name:'专科专业',index:2},
			 ]
			 
			}
		},
		methods:{
			  //选择专业把标题
			  chosePro:function(index){
			  	console.log(index)
			  	this.proindex = index
			  },
			  //选择专业课类别
			  choseProdata:function(index){
			  	console.log(index)
			  	this.prodataindex = index
			  },
			  //右边选择课程类别
			  choseExam:function(index){
			  	console.log(index)
			  	this.sitesindex = index
			  	if(index == 1){
			  		this.bkDataList = true;
			  		this.preData = false;
			  	}
			  	else if(index == 2){
			  		this.bkDataList = false;
			  		this.preData = true;
			  	}
			  },
			  //热门专业选择
			  chosehost:function(index){
			  	console.log(index)
			  	this.hostindex = index
			  	if(index == 1){
			  		this.hostk = true;
			  		this.hostzk = false;
			  	}
			  	else if(index == 2){
			  		this.hostk = false;
			  		this.hostzk =true;
			  	}
			  },
			  //大数据
			mouseenover:function(){
				this.down = !this.down;
				this.top = !this.top;
				this.bigDataPanel = !this.bigDataPanel;
			},
			//选择大数据
			choseData:function(name,index){
				console.log(name)
				this.bigDataPanel = true;
				this.down = false;
				this.top = true;
				if(index == 1){
					this.$router.push({
                    path:'/pc/pcSchool'
                })//pc端
				}
				else if(index == 2){
					this.$router.push({
                    path:'/pc/pcProfes'
                })//pc端
				}
			},
			//测试测评
			mouseenoverone:function(){
				this.onedown = !this.onedown;
				this.onetop = !this.onetop;
			},
			//智能志愿
			mouseenovertwo:function(){
				this.towdown = !this.towdown;
				this.towtop = !this.towtop;
			},
		}
	}
</script>

<style>
	.ban_fix_all{width:100%;height:265px;}
	.t_banner_back_all{width:100%;height:265px;background-color:#000000;position: absolute;top:0px;opacity: 0.5;}
	.dh_pc_title{width:1200px;position: absolute;left:50%;margin-left:-600px;bottom:30px;display:flex;display:-webkit-flex;display:-ms-flex;}
	.dh_pc_title_b{border-left:4px solid #ffb607;height:50px;line-height: 50px;font-size:30px;color:#ffffff;padding-left:10px;cursor: pointer;}
    #pcProfessional{width:100%;overflow: hidden;position: relative;}
	@media only screen and (min-width:1100px ) {
	    .fiexd{width:1260px;margin:0 auto;position: relative;padding-left:10px;padding-right:10px;overflow: hidden;}
		.search_dh{width:100%;height:65px;overflow: hidden;line-height: 65px;border-bottom: 1px solid #bbbbbb;}
		.search_dh li{float:left;font-size:14px;color:#9e9e9e;padding-right:5px;}
		.search_dh li span a{color:#9e9e9e;}
		.search_dh .dh_j{color:#444444;}
		/*搜索框*/
		.profess{width:100%;margin-top:80px;overflow: hidden;position: relative;display: flex;display:-webkit-flex;display:-ms-flex;}
		.search_k{width:100%;overflow: hidden;position: relative;display: flex;display:-webkit-flex;display:-ms-flex;}
		.search_k input{width:88.5%;border:none;border:1px solid #ffb606;padding-top:10px;padding-bottom: 10px;padding-left:20px;
		font-size:18px;color:#c9c9c9;border-bottom-left-radius:40px;border-top-left-radius:40px;display: inline-block;outline: none;}
		.search_k_bt{width:11.5%;display: inline-block;;padding-top:10px;padding-bottom: 10px;text-align: center;background-color:#ffb606;
		border-bottom-right-radius:40px;border-top-right-radius:40px;cursor: pointer;}
		/*专业*/
		.pro_sk{width:75%;overflow: hidden;position: relative;padding-right: 15px;}
		.pro_name{margin-top:40px;overflow: hidden;position: relative;}
		.pro_name_title{overflow: hidden;position: relative;padding-bottom: 15px;}
		.pro_name_title li{float:left;width:90px;height:40px;font-size:18px;text-align: center;line-height: 40px;margin-right:20px;
		cursor: pointer;}
		.pro{width:90px;height:40px;border:1px solid #ffb606;color:#ffb606;border-radius: 5px;}
		.proActive{width:90px;height:40px;background-color:#ffb606;color:#3a3a3a;border-radius: 5px;}
		.pro_name_list{height:200px;border:1px solid #d9dce1;border-radius: 5px;padding-top:25px;padding-left:25px;padding-right:25px;overflow: hidden;}
	    .pro_name_list_s{width:100%;overflow: hidden;position: relative;}
	    .pro_name_list_s li{float:left;margin-right:50px;margin-bottom: 15px;font-size:18px;color:#616161;cursor: pointer;}
	    .pro_name_list_s li span{display: block;}
	    .prodataActive{padding:5px;border-radius: 5px;background-color:#ffb606;font-size:18px;color:#3a3a3a;}
	    .prodata{padding:5px;font-size:18px;color:#3a3a3a;}
	    /*学科选择*/
	   .pro_diso{width:100%;overflow: hidden;position: relative;}
	   .pro_diso_title{margin-top:60px;overflow: hidden;position: relative;}
	   .pro_diso_name{width:100%;height:38px;line-height: 38px;}
	   .pro_diso_name span{font-size:24px;color:#3a3a3a;display:inline-block;padding-left:18px;}
	   .pro_diso_name i{display: inline-block;width:6px;height:38px;background-color:#ffb606;position: absolute;left:0;}
	   .pro_diso_content{margin-top:40px;padding-left:50px;}
	   .pro_diso_center{width:100%;overflow: hidden;position: relative;}
	   .pro_cat_title{padding-bottom: 20px;border-bottom: 1px solid #c3c3c3;display: flex;display:-webkit-flex;display:-ms-flex;}
	   .pro_cat_fast_title{font-size:18px;color:#8f8f8f;display: inline-block;width:180px;}
	   .pro_cat_title_list{overflow: hidden;display: inline-block;position: relative;}
	   .pro_cat_title_list li{float:left;font-size:18px;color:#3a3a3a;}
	   .pro_cat_title_list li:hover{color:#ffb606;cursor: pointer;}
	   .pro_cat_title_list span{display: inline-block;padding-left:10px;padding-right:10px;cursor: pointer;}
	   .pro_cat_base{padding-top:20px;overflow: hidden;position: relative;}
	  
	   .pro_cat_base li{float:left;font-size:18px;margin-right:80px;}
	   .base_title{color:#8f8f8f;}
	   .base_name{color:#3a3a3a;}
	   /*右边*/
	  .pro_right{width:25%;overflow: hidden;position: relative;display: inline-block;}
	  .pro_right_k{border:1px solid #d9dce1;border-radius: 5px;}
	  .pro_right_top{padding-top:20px;padding-bottom: 20px;font-size:22px;color:#3a3a3a;position: relative;overflow: hidden;border-bottom: 1px solid #d9dce1;}
	  .pro_right_top i{width:6px;height:27px;background-color:#ffb606;position: absolute;left:0;display: inline-block;}
	  .pro_right_top span{display: inline-block;padding-left:15px;}
	  .ex_exam{overflow: hidden;position: relative;height:41px;}
	  .ex_exam li{width:49.5%;float:left;line-height: 40px;text-align: center;font-size:16px;color:#3a3a3a;cursor: pointer;height:40px;}
	  .ex_exam li:first-child{border-right:1px solid #d9dce1;height:40px;}
	  .ex_exam .examActive {float:left;height:40px;line-height: 40px;text-align: center;font-size:16px;color:#3a3a3a;border-bottom: 1px solid #d9dce1;}
	  .ex_exam .examfast{float:left;height:40px;line-height: 40px;text-align: center;font-size:16px;color:#3a3a3a;border-top:2px solid #ffb606;}
	  
	  .examData{width:100%;overflow: hidden;position: relative;}
	  .examData b{display:inline-block;width:25px;height:25px;background-color:#cacaca;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .examList li:nth-child(1) .examData b{display:inline-block;width:25px;height:25px;background-color:#ffb606;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .examList li:nth-child(2) .examData b{display:inline-block;width:25px;height:25px;background-color:#ffb606;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .examList li:nth-child(3) .examData b{display:inline-block;width:25px;height:25px;background-color:#ffb606;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .examList{overflow: hidden;position: relative;padding-top:35px;padding-left:10px;padding-right:10px;}
	   .examList li{margin-bottom: 25px;cursor: pointer;}
	   .prefessList{overflow: hidden;position: relative;padding-top:35px;padding-left:10px;padding-right:10px;}
	   .prefessList li{margin-bottom: 25px;}
	    .exam_ex_name{font-size:16px;color:#3a3a3a;display: inline-block;;padding-left:10px;}
	  .exam_money{display: inline-block;float:right;font-size:16px;color:#ffb606} 
	  .prefessList li:nth-child(1) .examData b{display:inline-block;width:25px;height:25px;background-color:#ffb606;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .prefessList li:nth-child(2) .examData b{display:inline-block;width:25px;height:25px;background-color:#ffb606;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .prefessList li:nth-child(3) .examData b{display:inline-block;width:25px;height:25px;background-color:#ffb606;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  /*热门专业排行榜*/
	 .pro_right_ks{border:1px solid #d9dce1;border-radius: 5px;margin-top:30px;}
	 .hostfast{float:left;height:40px;line-height: 40px;text-align: center;font-size:16px;color:#3a3a3a;border-top:2px solid #ffb606;}
	 .hostActive {float:left;height:40px;line-height: 40px;text-align: center;font-size:16px;color:#3a3a3a;border-bottom: 1px solid #d9dce1;}
	 .hostPre{padding-top:35px;padding-left:12px;padding-right:12px;overflow: hidden;position: relative;}
	 .hostPre li{margin-bottom: 25px;}
	 /*.progress{margin-top:10px;width:100%;height:20px;border:1px solid #d9dce1;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	 border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
	 .progress-bar{width:80%;height:20px;background-color:#ffb606;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	  border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
	 /*1*/
	 .hostPre li .exam_money_b span{color:#3A3A3A;font-size:14px;}
	  .hostPre li:nth-child(1) .examData b{display:inline-block;width:25px;height:25px;background-color:#ffb606;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .hostPre li:nth-child(1) .examData .exam_money_b{display: inline-block;float:right;font-size:14px;color:#ffb606;}
	  .hostPre li:nth-child(1)  .progress{margin-top:10px;width:100%;height:20px;border:1px solid #d9dce1;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	 border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
	  .hostPre li:nth-child(1)  .progress-bar{/*width:80%;*/height:20px;/*background-color:#ffb606;*/border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	  border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
	  /*2*/
	  .hostPre li:nth-child(2) .examData b{display:inline-block;width:25px;height:25px;background-color:#5ebcfd;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .hostPre li:nth-child(2) .examData .exam_money_b{display: inline-block;float:right;font-size:14px;color:#5ebcfd;}
	  .hostPre li:nth-child(2) .progress{margin-top:10px;width:100%;height:20px;border:1px solid #d9dce1;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	 border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
	  .hostPre li:nth-child(2) .progress-bar{width:80%;height:20px;background-color:#5ebcfd;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	  border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
	  /*3*/
	  .hostPre li:nth-child(3) .examData b{display:inline-block;width:25px;height:25px;background-color:#4be886;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .hostPre li:nth-child(3) .examData .exam_money_b{display: inline-block;float:right;font-size:14px;color:#4be886;}
	  .hostPre li:nth-child(3) .progress{margin-top:10px;width:100%;height:20px;border:1px solid #d9dce1;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	 border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
	  .hostPre li:nth-child(3) .progress-bar{width:80%;height:20px;background-color:#4be886;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	  border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
	  /*4*/
	  .hostPre li:nth-child(4) .examData b{display:inline-block;width:25px;height:25px;background-color:#ea4bf4;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .hostPre li:nth-child(4) .examData .exam_money_b{display: inline-block;float:right;font-size:14px;color:#ea4bf4;}
	  .hostPre li:nth-child(4) .progress{margin-top:10px;width:100%;height:20px;border:1px solid #d9dce1;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	 border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
	  .hostPre li:nth-child(4) .progress-bar{width:80%;height:20px;background-color:#ea4bf4;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	  border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
	  /*5*/
	   .hostPre li:nth-child(5) .examData b{display:inline-block;width:25px;height:25px;background-color:#fc682d;text-align: center;line-height: 25px;color:#3a3a3a;
	  border-radius: 5px;}
	  .hostPre li:nth-child(5) .examData .exam_money_b{display: inline-block;float:right;font-size:14px;color:#fc682d;}
	  .hostPre li:nth-child(5) .progress{margin-top:10px;width:100%;height:20px;border:1px solid #d9dce1;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	 border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
	  .hostPre li:nth-child(5) .progress-bar{width:80%;height:20px;background-color:#fc682d;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
	  border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
	  /*平台广告位*/
	 .adver{border: 1px solid #d9dce1;border-radius: 5px; margin-top: 30px;padding-bottom:30px ;}
	 .ad_right_top{padding-top: 20px;padding-bottom: 20px;font-size: 22px;color: #3a3a3a;position: relative;overflow: hidden;}
	 .ad_right_top span{display: inline-block;padding-left:15px;}
	 .ad_adver{padding-top:25px;padding-left:25px;padding-right:15px;}
	 .ad_right_top i{width:6px;height:27px;background-color:#ffb606;position: absolute;left:0;display: inline-block;}
	 .ad_adver img{width:100%;}
	 .ad_content{padding-top:7px;padding-right:7px;font-size:10px;color:#3a3a3a;line-height: 16px;}
	}
</style>